<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-18 14:30:20
 * @LastEditTime: 2020-08-05 11:24:21
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <van-nav-bar
      title="BScroll组件"
      fixed
      :border="false"
      left-arrow
      @click-left="$router.go('-1')"
    />   
    <TabNav :tabs="tabs" :active="activeIndex" @change="ChangeView"></TabNav>
    <!-- 内容 -->
    <BScroll
      :data="list"
      :scrollX="true"
      :scrollY="false"
      :probeType="1"
      :listenScroll="true"
      :openSnap="true"
      @scroll="A_Scroll"
      ref="scroll_wrap"
      class="scroll_wrap"
      @getCurrentPage="getCurrentPage"
    >
      <ul class="tab_content">
        <li v-for="(item,index) in tabs" ref="tab_item" :key="index">
            {{item}}
            <tab-item :list="tabs" :startY="scrolldis[activeIndex]"/>
        </li>
      </ul>
    </BScroll>

    <van-tag type="primary" size="large">scroll纵向区域</van-tag>
    <van-tag type="success" size="large">滚动坐标y:{{startY}}</van-tag>
    <BScroll :data="list" :probeType="3" :listenScroll="true" @scroll="V_Scroll" class="v_scroll">
        <ul class="list">
            <li v-for="item in tabs" :key="item">{{item}}</li>
        </ul>
    </BScroll>
    
  </div>
</template>
<script>
import TabItem from './tabs/TabItem.vue';
import TabNav from './tabs/TabNav.vue';

export default {
  data() {
    return {
      list: [],
      tabs: ["推荐", "热门", "追番", "影视","音乐","动漫"],
      active: 0,
      startY: 0,
      startX: 0,
      scroll_wrap:{},//轮播对象
      tab_item_width:'',
      activeIndex:0,
      scrolldis:[],//滚动距离存储
    };
  },
  components:{
    TabItem,
    TabNav
  },
  mounted() {
      this.$nextTick(()=>{
        this.scroll_wrap = this.$refs.scroll_wrap;
        this.tab_item_width = this.$refs.tab_item[0].clientWidth;
      })
    
  },
  methods: {
    ChangeView(index){
      this.scroll_wrap.scroll.goToPage(index,0,300,'ease');
    },
    // 纵轴滚动
    V_Scroll(e) {
      this.startY = e.y;
    },
    A_Scroll(e) {
      // 获取当前页
      // console.log("scroll_wrap",this.scroll_wrap);
      // let pageIndex = this.scroll_wrap.getCurrentPage();
      // console.log('pageIndex',pageIndex);
      console.log("e",e);
      this.scrolldis[this.activeIndex] = e.y;
    },
    getCurrentPage(e){
      this.activeIndex = e.pageX;
    }
  }
};
</script>
<style lang="less" scoped>
.my-swipe{
  width: 100%;
}
.v_scroll {
  height: 200px;
  overflow: hidden;
  margin: 20px auto;
}
.list {
  li {
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    height: 50px;
    border-bottom: 1px solid #ccc;
  }
  li:first-child {
    border-top: 1px solid #ccc;
  }
}
.h_scroll {
  height: 100px;
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
}

.scroll_wrap {
  height: 200px;
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
}
.tab_content {
  display: inline-block;
  position: relative;
  li {
    display: inline-block;
    width: 100vw;
    height: 100%;
    font-size: 36px;
    text-align: center;
    border-right:1px solid #eee;
  }
}
</style>